<template>
    <a-modal
        v-model:visible="showModal"
        :title="title"
        :width="620"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        @ok="onSubmit"
        @cancel="handleCancle"
    >
        <a-form
            class="dept-model"
            layout="horizontal"
            :model="formState"
            :rules="rules"
            ref="formRef"
            style="justify-content: space-between"
        >
            <!-- <a-form-item class="full-width" :label="t('yl.merchantLabelName')" name="parentName">
                <a-upload
                    v-model:file-list="fileList"
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                >
                    <img v-if="formState.logoUrl" :src="formState.logoUrl" alt="avatar" />
                    <div v-else>
                        <loading-outlined v-if="loading"></loading-outlined>
                        <plus-outlined v-else></plus-outlined>
                    </div>
                </a-upload>
            </a-form-item> -->
            <div>
                <!-- 商户名称 -->
                <a-form-item class="full-width" :label="t('yl.merchantLabelName')" name="name">
                    <a-input v-model:value="formState.name" :placeholder="t('yl.parentName')" />
                </a-form-item>
                <!-- 收银编号 -->
                <a-form-item class="full-width" :label="t('yl.cashRegisterName')" name="cashRegister">
                    <a-input v-model:value="formState.cashRegister" :placeholder="t('yl.cashRegister')" />
                </a-form-item>
                <!-- 选择行业 -->
                <a-form-item class="full-width" :label="t('yl.industryIdLabel')" name="industryId">
                    <a-select ref="select" v-model:value="formState.industryId">
                        <a-select-option :value="item.industryCode" v-for="(item, index) in industryList" :key="index">{{
                            item.industry
                        }}</a-select-option>
                    </a-select>
                </a-form-item>
                <!-- 商户类型 -->
                <!-- <a-form-item class="full-width" :label="t('yl.systypeLabel')" name="systype">
                    <a-select ref="select" v-model:value="formState.systype">
                        <a-select-option :value="item.name" v-for="(item, index) in systypeList" :key="index">{{
                            item.label
                        }}</a-select-option>
                    </a-select>
                </a-form-item> -->
                <!-- 账号 -->
                <a-form-item class="full-width" :label="t('yl.account')" name="account" v-if="!formState.id">
                    <a-input v-model:value="formState.account" :placeholder="t('yl.account')" />
                </a-form-item>

                <!-- 密码 -->
                <a-form-item class="full-width" :label="t('yl.password')" name="password" v-if="!formState.id">
                    <a-input v-model:value="formState.password" :placeholder="t('yl.password')" />
                </a-form-item>
                <!-- 邮箱 -->
                <a-form-item class="full-width" :label="t('yl.email')" name="email">
                    <a-input v-model:value="formState.email" :placeholder="t('yl.email')" />
                </a-form-item>
            </div>
            <div>
                <!-- 联系人 -->
                <a-form-item class="full-width" :label="t('yl.contactName')" name="contactName">
                    <a-input v-model:value="formState.contactName" :placeholder="t('yl.contactName')" />
                </a-form-item>

                <!-- 手机号 -->
                <a-form-item class="full-width" :label="t('yl.contactTel')" name="contactTel">
                    <a-input v-model:value="formState.contactTel" :placeholder="t('yl.contactTel')" />
                </a-form-item>
                <!-- 负责专员 -->
                <a-form-item class="full-width" :label="t('yl.afterSalesSpecialis')" name="afterSalesSpecialis">
                    <a-input v-model:value="formState.afterSalesSpecialis" :placeholder="t('yl.afterSalesSpecialis')" />
                </a-form-item>
                <!-- 省份 -->
                <a-form-item class="full-width" :label="t('yl.provinceNameLabel')" name="provinceList">
                    <a-cascader
                        :fieldNames="{ label: 'name', value: 'name', children: 'countryRegionDtos' }"
                        :options="countryRegionList"
                        :placeholder="t('yl.provinceName')"
                        v-model:value="formState.provinceList"
                    />
                </a-form-item>
                <!-- 详细地址 -->
                <a-form-item class="full-width" :label="t('yl.address')" name="address">
                    <a-input v-model:value="formState.address" :placeholder="t('yl.address')" />
                </a-form-item>
            </div>
        </a-form>
    </a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';

import { getIndustry } from '@/api/merchant';
interface DeptState {
    password: string | number;
    contactName: string | number;
    cashRegister: string | number;
    account: string | number;
    contactTel: string | number;
    email: string | number;
    address: string | number;
    afterSalesSpecialis: string | number;
    industryId: string | number;
    provinceList: any[];
    areaCode: string;
    name: string;
    provinceName: string | number;
    provinceId: string | number;
    cityName: string | number;
    cityId: string | number;
    countyName: string | number;
    countyId: string | number;
    areaName: string | number;
    areaId: string | number;
    logoUrl: string | number;
    id: string | number;
    systype: string | number;
}

// 表单校验规则
const initRules = (t: fn) => {
    return {
        industryId: [{ required: true, message: t('yl.industryIdLabel'), trigger: 'blur', type: 'number' }],
        password: [{ required: true, message: t('yl.password'), trigger: 'blur' }],
        name: [{ required: true, message: t('yl.merchantLabelName'), trigger: 'blur' }],
        account: [{ required: true, message: t('yl.account'), trigger: 'blur' }],
        email: [{ required: true, message: t('yl.email'), trigger: 'blur' }],
        contactName: [{ required: true, message: t('yl.contactName'), trigger: 'blur' }],
        contactTel: [{ required: true, message: t('yl.contactTel'), trigger: 'blur' }],
        afterSalesSpecialis: [{ required: true, message: t('yl.afterSalesSpecialis'), trigger: 'blur' }],
        provinceList: [{ required: true, message: t('yl.provinceName'), trigger: 'blur', type: 'array' }],
        systype: [{ required: true, message: t('yl.systypeLabel'), trigger: 'blur' }],
    };
};

export default defineComponent({
    name: 'roleModel',
    components: {},
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },

        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        dept: {
            type: Object,
        },
        CountryData: {
            type: Object,
        },
        countryRegionList: {
            type: Array,
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();
        console.log(props);
        const showModal = computed(() => props.visible);
        // const country = computed(() => props.selectCountry as NormalObj[]);
        const industryList = ref<any>([]);
        const countryRegionList = ref<any>([]);
        const systypeList = [
            {
                name: 'A',
                label: '渠道代理',
            },
            {
                name: 'T',
                label: '商户',
            },
            {
                name: 'D',
                label: '门店',
            },
        ];

        const CountryData = {
            value: 'id',
            label: 'name',
            children: 'countryRegionDtos',
        };

        const formState: DeptState = reactive({
            password: '', // 设备编号
            contactName: '',
            areaCode: '',
            account: '',
            contactTel: '',
            address: '',
            afterSalesSpecialis: '',
            cashRegisterName: '',
            industryId: '',
            email: '',
            provinceList: [],
            cashRegister: '',
            provinceName: '',
            provinceId: '',
            cityName: '',
            cityId: '',
            countyName: '',
            countyId: '',
            areaName: '',
            areaId: '',
            name: '',
            logoUrl: '',
            id: '',
            systype: 'T',
        });
        // 编辑时赋值
        watch(
            () => props.dept,
            (dept) => {
                // if (_.isEmpty(dept)) return;
                const list: string = '';
                const {
                    password, // 设备编号
                    contactName,
                    areaCode,
                    account,
                    contactTel,
                    address,
                    afterSalesSpecialis,
                    industryId,
                    email,
                    cashRegister,
                    provinceName,
                    provinceId,
                    cityName,
                    cityId,
                    countyName,
                    countyId,
                    areaName,
                    areaId,
                    name,
                    logoUrl,
                    id,
                } = dept as NormalObj;
                formState.systype = 'T';
                formState.name = name;
                formState.contactName = contactName;
                formState.logoUrl = logoUrl;
                formState.id = id;
                formState.areaCode = areaCode;
                formState.account = account;
                formState.contactTel = contactTel;
                formState.address = address;
                formState.afterSalesSpecialis = afterSalesSpecialis;
                formState.cashRegister = cashRegister;
                formState.industryId = industryId ? Number(industryId) : '';
                formState.email = email;
                formState.cashRegister = cashRegister;
                formState.password = password;
                if (areaName) {
                    formState.provinceList = (provinceName + ',' + cityName + ',' + countyName + ',' + areaName).split(',');
                } else if (countyName) {
                    formState.provinceList = (provinceName + ',' + cityName + ',' + countyName).split(',');
                } else if (provinceName && cityName) {
                    formState.provinceList = (provinceName + ',' + cityName).split(',');
                } else {
                    formState.provinceList = [];
                }
            }
        );
        watch(
            () => props.countryRegionList,
            (list) => {
                countryRegionList.value = list;
            }
        );
        onMounted(() => {
            handleIndustry();
        });
        // 表单校验
        const rules = initRules(t);
        const formRef = ref();
        // 提交
        const onSubmit = () => {
            formRef.value.validate().then(() => {
                let pathList: any = [];
                if (formState.provinceList.length) {
                    TreeFun(countryRegionList.value, pathList);
                    console.log(pathList.length);
                    if (pathList.length) {
                        formState.provinceName = pathList[0].name;
                        formState.provinceId = pathList[0].id;
                        formState.cityName = pathList[1].name;
                        formState.cityId = pathList[1].id;
                        if (pathList.length == 3) {
                            formState.countyName = pathList[2].name;
                            formState.countyId = pathList[2].id;
                        } else if (pathList.length == 4) {
                            formState.areaName = pathList[3].name;
                            formState.areaId = pathList[3].id;
                        }
                    }
                }

                emit('submit', formState);
            });
        };
        const TreeFun = (list: any, pathList: any) => {
            for (let i = 0; i < list.length; i++) {
                for (let j = 0; j < formState.provinceList.length; j++) {
                    if (list[i].name == formState.provinceList[j]) {
                        pathList.push({ id: list[i].id, name: list[i].name });
                        if (list[i].countryRegionDtos && list[i].countryRegionDtos.length) {
                            TreeFun(list[i].countryRegionDtos, pathList);
                        }
                    }
                }
            }
        };
        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };
        // 获取所有行业
        const handleIndustry = async () => {
            const { content } = await getIndustry({
                page: 0,
                size: 9999,
                sort: 'id,desc',
                industry: 'industry',
            });

            industryList.value = content;
        };

        return {
            industryList,
            formRef,
            showModal,
            formState,
            t,
            rules,
            onSubmit,
            handleCancle,
            handleIndustry,
            countryRegionList,
            TreeFun,
            systypeList,
        };
    },
});
</script>
<style lang="scss" scoped>
.dept-model {
    @include flexWrap;
    width: 100%;
    .ant-form-item {
        @include flex;
        width: 50%;
        margin-right: 0;
        padding-right: $width10;
        margin-bottom: $width8;
        :deep .ant-form-item-label {
            flex-basis: $formLabel;
        }
        :deep .ant-form-item-control-wrapper {
            flex: 1;
        }
        :deep .ant-form-item-children,
        :deep .ant-input-number {
            width: 100%;
        }
        &.full-width {
            width: 100%;
        }
    }
}
</style>
